<template>
  <view class="payday-picker">
    <view class="picker-label">{{ label }}</view>
    <view class="picker-wrapper" @tap="showPicker">
      <text class="picker-value">{{ formatValue }}</text>
      <view class="picker-arrow">
        <view class="arrow-icon"></view>
      </view>
    </view>
    
    <!-- 弹出选择器 -->
    <view class="picker-modal" v-if="showModal">
      <view class="modal-mask" @tap="hidePicker"></view>
      <view class="modal-content">
        <view class="modal-header">
          <text class="title">设置发薪时间</text>
          <view class="close-btn" @tap="hidePicker">✕</view>
        </view>
        <view class="picker-container">
          <picker-view
            :value="[currentDay - 1, currentHour, currentMinute]"
            @change="onPickerChange"
            class="picker-view"
          >
            <picker-view-column>
              <view class="picker-item" v-for="day in 31" :key="day">
                {{ day }}号
              </view>
            </picker-view-column>
            <picker-view-column>
              <view class="picker-item" v-for="hour in 24" :key="hour - 1">
                {{ (hour - 1).toString().padStart(2, '0') }}时
              </view>
            </picker-view-column>
            <picker-view-column>
              <view class="picker-item" v-for="minute in 60" :key="minute - 1">
                {{ (minute - 1).toString().padStart(2, '0') }}分
              </view>
            </picker-view-column>
          </picker-view>
        </view>
        <view class="modal-footer">
          <view class="confirm-btn" @tap="confirmPicker">确定</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PaydayPicker',
  props: {
    value: {
      type: Object,
      default: () => ({
        day: 15,
        time: '12:00'
      })
    },
    label: {
      type: String,
      default: '发薪时间'
    }
  },
  data() {
    return {
      showModal: false,
      currentDay: this.value.day,
      currentHour: parseInt(this.value.time.split(':')[0]),
      currentMinute: parseInt(this.value.time.split(':')[1])
    }
  },
  computed: {
    formatValue() {
      const time = `${this.currentHour.toString().padStart(2, '0')}:${this.currentMinute.toString().padStart(2, '0')}`
      return `每月${this.currentDay}号 ${time}`
    }
  },
  methods: {
    showPicker() {
      this.showModal = true
    },
    hidePicker() {
      this.showModal = false
    },
    onPickerChange(e) {
      const [day, hour, minute] = e.detail.value
      this.currentDay = day + 1
      this.currentHour = hour
      this.currentMinute = minute
    },
    confirmPicker() {
      this.$emit('input', {
        day: this.currentDay,
        time: `${this.currentHour.toString().padStart(2, '0')}:${this.currentMinute.toString().padStart(2, '0')}`
      })
      this.hidePicker()
    }
  }
}
</script>

<style lang="scss">
.payday-picker {
  .picker-label {
    font-size: 16px;
    color: #64748b;
    margin-bottom: 8px;
  }
  
  .picker-wrapper {
    height: 52px;
    background: #f8fafc;
    border-radius: 12px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    .picker-value {
      font-size: 17px;
      color: #1e293b;
    }
    
    .picker-arrow {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      background: #f1f5f9;
      
      .arrow-icon {
        position: relative;
        width: 12px;
        height: 12px;
        &::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 6px;
          height: 6px;
          border-right: 2px solid #64748b;
          border-bottom: 2px solid #64748b;
          transform: translate(-50%, -75%) rotate(45deg);
        }
      }
    }
  }
  
  .picker-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    
    .modal-mask {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.4);
    }
    
    .modal-content {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      background: #fff;
      border-radius: 24px 24px 0 0;
      padding: 24px;
      
      .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
        
        .title {
          font-size: 20px;
          color: #1e293b;
          font-weight: 600;
        }
        
        .close-btn {
          width: 32px;
          height: 32px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 16px;
          background: #f1f5f9;
          color: #64748b;
          font-size: 18px;
        }
      }
      
      .picker-container {
        height: 240px;
        
        .picker-view {
          width: 100%;
          height: 100%;
          
          .picker-item {
            line-height: 48px;
            text-align: center;
            color: #1e293b;
          }
        }
      }
      
      .modal-footer {
        margin-top: 24px;
        
        .confirm-btn {
          height: 52px;
          line-height: 52px;
          text-align: center;
          background: #3b82f6;
          color: #fff;
          border-radius: 12px;
          font-size: 18px;
          font-weight: 500;
        }
      }
    }
  }
}
</style> 